<script>
import { computed, defineComponent } from 'vue'
import '@/icons/fonts/iconfont.css'

export default defineComponent({
  props: {
    prefix: {
      type: String,
      default: 'icon-',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '',
    },
    size: {
      type: [String, Number],
      default: '48',
    },
    deepClass: {
      type: [String, Object, Array],
      default: () => [],
    },
  },
  setup(props) {
    const iconName = computed(() => `${props.prefix}${props.name}`)

    // 如果有其他逻辑或响应式数据，可以在这里添加

    return {
      iconName,
    }
  },
})
</script>

<template>
  <i
    class="iconfont inline-block"
    :class="[deepClass, iconName]"
    :style="{ color, fontSize: `${size}rpx` }"
  >
    <slot />
  </i>
</template>
